<template>
  <div v-loading.fullscreen.lock="loading">
    <div class="type">
      <div class="for-type" :class="isTypeBak==1?'type-hover':''" @click="onType(1)">女性服装</div>
      <div class="for-type" :class="isTypeBak==2?'type-hover':''" @click="onType(2)">男性服装</div>
    </div>
    <div v-if="isTypeBak==1">
      <botanyGallery :galleryData="galleryData"></botanyGallery>
    </div>
    <div v-else>
      <botanyMeaty :meatyData="meatyData"></botanyMeaty>
    </div>
  </div>
</template>

<script>
// 男性服装
import botanyMeaty from "@/components/botanyMeaty";
// 女性服装
import { galleryListSave, meatyListSave } from "@/api/home/api";
import botanyGallery from "../../../components/botanyGallery";
export default {
  components: {
    botanyGallery,
    botanyMeaty
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      loading: false,
      isTypeBak: 1,
      galleryData: [],
      meatyData: []
    };
  },
  watch: {
    isTypeBak: {
      immediate: true,
      handler(value) {
        if (value == 1) {
          this.getList();
        } else {
          this.getMeatyList();
        }
      }
    }
  },
  created() {
    // this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      let query = {
        u_id: this.user.id
      };
      galleryListSave(query).then(res => {
        let data = res.data;
        data.dataList.forEach((item, index, arr) => {
          arr[index].img_list = JSON.parse(arr[index].img_list);
        });
        this.galleryData = data.dataList;
        this.loading = false;
      });
    },
    getMeatyList() {
      this.loading = true;
      let query = {
        u_id: this.user.id
      };
      meatyListSave(query).then(res => {
        let data = res.data;
        this.meatyData = data.dataList;

        this.loading = false;
      });
    },
    onType(i) {
      this.isTypeBak = i;
      this.getList();
    }
  }
};
</script>

<style scoped>
.type {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
.for-type {
  width: 96px;
  height: 34px;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  color: #0dbd95;
  border: 1px solid #0dbd95;
  border-radius: 5px;
  margin-right: 20px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}
.type-hover {
  background: #0dbd95;
  color: #fff;
}
.pag {
  display: flex;
  justify-content: center;
}
.pag >>> .el-pager li {
  padding: 0 4px;
  font-size: 14px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border-radius: 4px;
}
.pag >>> .el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 14px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  vertical-align: top;
  box-sizing: border-box;
  border-radius: 4px;
}
.pag >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0dbd95;
  color: #fff;
}
.pag >>> .is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.pag >>> .is-background .el-pager li:hover {
  color: #0dbd95;
}
.pag >>> .is-background .el-pager li:not(.disabled):hover {
  color: #0dbd95;
}
.pag >>> .is-background .el-pager li:not(.disabled).active:hover {
  background-color: #0dbd95;
  color: #fff;
}
</style>